<template>
    <view class="wrap">
        <!-- 搜索 -->
        <view class="search-wrap">
            <u-search shape="square" placeholder="搜索歌曲名称/歌手" placeholder-color="#abb3b8" :show-action="showAction" maxlength="20" v-model="keyword"></u-search>
        </view>
        <!--tabs  -->
        <view class="tabs-wrap">
            <u-tabs ref="tabs" item-width="50%" :list="list" :current="current" bar-height="6" bar-width="40" active-color="#20bf64" is-scroll="false" @change="change"></u-tabs>
        </view>
        <!--列表  -->
        <view class="list-wrap">
            <scroll-view scroll-y="true" class="scroll-wrap" v-for="(item, index) in allMusiList" :key="index" :class="{ move: current == 1 }">
                <MusicItem
                    v-for="(item2, index2) in item"
                    :key="index2"
                    :musicData="item2"
                    :index="index2"
                    @toggleStar="toggleStar"
                    @togglePlay="togglePlay"
                    @useMusic="useMusic"
                ></MusicItem>
            </scroll-view>
        </view>
        <Audio :src="currentMusic" :playStatus="currentPlayStatus"></Audio>
    </view>
</template>
<script>
import MusicItem from './components/MusicItem.vue';
import { getMusicList, getCollectMusicList, collectMusic } from '@/api/music.js';
import { Audio } from '@/components/Audio/index.vue';
export default {
    name: '',
    data() {
        return {
            keyword: '',
            showAction: false,
            list: [
                {
                    name: '推荐音乐'
                },
                {
                    name: '我的收藏'
                }
            ],
            current: 0,
            allMusiList: [[], []],
            currentMusic: '',
            currentPlayStatus: false,
            currentMusicIndex: -1
        };
    },

    computed: {},
    onLoad() {
        this.getMusicList();
        this.getCollectMusicList();
    },
    onShow() {},
    methods: {
        change(index) {
            this.current = index;
        },
        // 获取音乐列表数据
        async getMusicList() {
            let list = await getMusicList();
            if (list && list.length > 0) {
                list.forEach(item => {
                    item.playStatus = false;
                });
                this.allMusiList.splice(0, 1, list);
            }
        },
        //获取收藏列表数据
        async getCollectMusicList() {
            let list = await getCollectMusicList();
            if (list && list.length > 0) {
                list.forEach(item => {
                    item.playStatus = false;
                });
                this.allMusiList.splice(1, 1, list);
            } else {
                this.allMusiList.splice(1, 1, []);
            }
        },
        // 切换收藏或者不收藏
        toggleStar(index) {
            let toggleMusic = this.allMusiList[this.current][index];
            this.collectMusic(toggleMusic);
        },
        // 收藏音乐或者取消收藏
        async collectMusic(toggleMusic) {
            let result = await collectMusic(toggleMusic.id);
            if (result.RequestStatus === 100) {
                this.getMusicList();
                this.getCollectMusicList();
            }
        },
        // 切换收藏或者不收藏
        togglePlay(index) {
    
            let toggleMusic = this.allMusiList[this.current][index];
            let playStatus = toggleMusic.playStatus;
            this.allMusiList.forEach(item => {
                if (item.length > 0) {
                    item.forEach(music => {
                        music.playStatus = false;
                    });
                }
            });
            toggleMusic.playStatus = !playStatus;
            this.currentPlayStatus = toggleMusic.playStatus;
            this.currentMusic = toggleMusic.url;
        },
        // 使用该音乐
        useMusic(data) {
            this.$u.vuex('vuex_music',{
                url:data.url,
                id:data.id
            });
            this.$u.route({
                type: 'back'
            });
        }
    },
    watch: {},
    components: { MusicItem, Audio }
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    .search-wrap {
        width: 670rpx;
        height: 60rpx;
        margin: 30rpx auto 24rpx;
        flex-shrink: 0;
    }
    .tabs-wrap {
        position: relative;
        width: 100%;
        flex-shrink: 0;
        &::after {
            position: absolute;
            content: '';
            left: 0;
            bottom: 4rpx;
            content: '';
            width: 750rpx;
            height: 2rpx;
            background: #e9eef3;
        }
    }
    .list-wrap {
        flex-grow: 2;
        display: flex;
        width: 100%;
        box-sizing: border-box;
        overflow-y: scroll;
        overflow-x: hidden;
        padding-top: 50rpx;
        .scroll-wrap {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            transition: all 0.5s ease;
            transform: translateX(0);
        }
        .move {
            transform: translateX(-100%);
        }
    }
}
</style>
